<template>
  <div class="add-PanXuan-question">
    <h2 style="margin: 0 auto;margin-left: 45%;">录入判断题</h2>
    <!-- 表单 -->
    <form class="form1" @submit.prevent="PanXuanQuestion">
      <!-- 题目 -->
      <div class="form-group">
        <label for="stem">题目:</label>
        <el-input id="stem" v-model="stem" type="text" required />
      </div>
      <!-- 分数 -->
      <div class="form-group">
        <label for="fraction">分数:</label>
        <el-input id="fraction" v-model.number="fraction" type="number" required />
      </div>
      <!-- 科目 -->
      <div class="form-group">
        <label for="subject">科目:</label>
        <el-input id="subject" v-model="subject" type="text" required />
      </div>
      <!-- 选项 -->
      <div class="form-group">
        <label for="a">选项A</label>
        <el-input v-model="a" type="text" placeholder="对" readonly />
      </div>
      <div style="margin-top: 3%">
        <label for="b">选项B</label>
        <el-input v-model="b" type="text" style="padding-bottom: 3%;" placeholder="错" readonly />
      </div>
      <!-- 正确选项 -->
      <div class="form-group">
        <label for="answer">正确选项:</label>
        <el-select v-model="answer">
          <el-option v-for="option in options" :key="option.value" :value="option.value">
            {{ option.text }}
          </el-option>
        </el-select>
      </div>
      <!-- 提交按钮 -->
      <el-button type="submit" @click="PanXuanQuestion">录入题目</el-button>
    </form>
  </div>
</template>

<script>
import { PanXuanQuestion } from '@/api/user'
export default {
  data() {
    return {
      stem: '',
      answer: '',
      fraction: 0,
      subject: '',
      a: '是',
      b: '不是',
      questions: '判断题',
      options: [
        { value: 'true', text: 'A' },
        { value: 'false', text: 'B' }
      ]
    }
  },
  methods: {
    async PanXuanQuestion() {
      console.log('Request:', this.user)
      const data = {
        stem: this.stem,
        fraction: this.fraction,
        subject: this.subject,
        answer: this.answer,
        a: this.a,
        b: this.b,
        questions: '判断题'
      }
      try {
        const response = await PanXuanQuestion(data)
        console.log(response)
        // 处理响应
        console.log(response.data)
        console.log('传参成功')
      } catch (error) {
        // 处理错误
        console.error('Error:', error)
      }
    }
  }
}
</script>

  <style scoped>
  /* 添加CSS样式 */
  .form-group {
      margin-bottom: 15px;
  }

  .form1 {
      padding-top: 2%;
      width: 40%;
      margin: 0 auto;
      text-align: center;
  }
  </style>
